<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header>
      <router-link
          class="word"
          to="/"
      >个人中心
      </router-link>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside>
        <el-menu
            class="el-menu-vertical-demo"
            :router="true"
            :default-active="activePath"
        >
          <el-menu-item
              index="/log"
              @click="saveNavState('/log')"
          >
            <i class="el-icon-s-data"></i>
            <span slot="title">借阅记录</span>
          </el-menu-item>
          <el-menu-item
              index="/account"
          >
            <i class="el-icon-menu"></i>
            <span slot="title">查询书籍</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 主体区域 -->
      <el-main h>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      logoutVisible: false,
      nextLogoutVisible: false,
      // 激活链接
      activePath: "",
    };
  },
  methods: {
// 保存链接激活状态
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
    },
  },
  // beforeCreate: async function () {
  //   try {
  //     const data = await this.$http.get("admin");
  //     console.log(data);
  //   } catch (err) {
  //     console.log(err);
  //     this.$message.error("请先登录");
  //     this.$router.push("/login");
  //   }
  // },
  // created: async function () {
  //   const data = await this.$http.get("admin");
  //   console.log(data);
  //   // 保存侧边栏点击状态
  //   this.activePath = window.sessionStorage.getItem("activePath");
  // },
};
</script>

<style scoped>
.home-container {
  height: 100%;
}

.el-header {
  background-color: #3f51b5;
}

.word {
  color: white;
  font-size: 30px;
  text-decoration: none;
  position: relative;
  top: 5px;
  left: 20px;
}

</style>
